import { defineComponent, reactive, ref } from "vue";
import { CirclePlus, Delete, EditPen, Search } from "@element-plus/icons-vue";
import { TagXinXI } from "@/views/DataMaintenance/ZhenDuanJieGuoWeiHu/components/ZhenDuanOther/TagXinXi/TagXinXI";
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import "./ZhangDuanOther.scss";
import { DeleteJiBingDel, GetJiBingSel } from "@/api/modules/zhenDuanJieGuo";
import type { PaginationProps } from "@pureadmin/table";
import { useHandleData } from "@/hooks/useHandleData";
import { useZhenDuanJieGuo } from "@/stores/modules/zhenDuanJieGuo";
interface jiBingMode {
  searchFormTongYong: string;
  strShiFouWanQuanPiPei: boolean;
}
export default defineComponent({
  name: "ZhenDuanOther",
  components: { splitpane },
  setup(ctx: any) {
    console.log(ctx);
    const searchForm: jiBingMode = reactive({
      searchFormTongYong: "",
      strShiFouWanQuanPiPei: false
    });
    const searchFormClick = () => {
      let obj = {
        strJiBingMingCheng: searchForm.searchFormTongYong,
        strShiFouWanQuanPiPei: searchForm.strShiFouWanQuanPiPei ? "是" : "否",
        intPage: pagination.currentPage,
        intPageSize: pagination.pageSize
      };
      console.log(obj);
      console.log(searchForm);
      GetJiBingSel(obj).then((res: any) => {
        if (res.Success === 0) {
          console.log(res.Data);
          tableData.value = res.Data.ListXinXi;
          pagination.total = res.Data.pageCount;
        }
      });
    };
    // 编辑
    const onOpenEditRole = (type: string, row: Object) => {
      console.log("点击事件", type, row);
    };
    // 删除
    const deleteAccount = async (row: Partial<any> = {}) => {
      let obj = {
        JiBingID: row.JiBingID
      };
      await useHandleData(DeleteJiBingDel, obj, `删除【${row.JiBingMingCheng}】`);
      await searchFormClick();
    };
    // 每一行的点击事件
    const tableDataClick = data => {
      useZhenDuanJieGuo().setJiBingID(data.JiBingID);
      useZhenDuanJieGuo().setJiBingTableSomeOne(data);
    };
    const tableData = ref<any>([]);
    const columns: any = [
      {
        label: "序号",
        type: "index",
        width: "70"
      },
      {
        label: "疾病名称",
        prop: "JiBingMingCheng",
        width: "240"
      },
      {
        label: "解释",
        prop: "JieShi"
      },
      {
        label: "建议",
        prop: "JianYi"
      },
      {
        label: "指导",
        prop: "ZhiDao"
      },
      {
        label: "程度",
        prop: "ChengDu"
      },
      {
        label: "拼音码",
        prop: "PYM"
      },
      {
        label: "使用次数",
        prop: "ShiYongCiShu"
      },
      {
        label: "对应部位",
        prop: "DuiYingBuWei"
      },
      {
        label: "所属院区",
        prop: "SuoShuYuanQu"
      },
      {
        label: "循序",
        prop: "ShunXu"
      },
      {
        label: "疾病ID",
        prop: "JiBingID"
      },
      {
        label: "操作",
        fixed: "right",
        width: "100",
        // slot: "caoZuo"
        cellRenderer: (scope: any) => (
          <>
            <el-tooltip className="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link icon={EditPen} onClick={() => onOpenEditRole("edit", scope.row)}></el-button>
            </el-tooltip>
            <el-tooltip className="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link icon={Delete} onClick={() => deleteAccount(scope.row)}></el-button>
            </el-tooltip>
          </>
        )
      }
    ];
    const settingLR: ContextProps = reactive({
      minPercent: 50,
      defaultPercent: 60,
      split: "vertical"
    });

    const pagination = reactive<PaginationProps>({
      pageSize: 10,
      currentPage: 1,
      pageSizes: [10, 15, 20],
      total: 0,
      align: "right",
      background: true,
      small: false
    });

    const onSizeChange = (val: number) => {
      pagination.pageSize = val;
      searchFormClick();
    };

    const onCurrentChange = (val: number) => {
      pagination.currentPage = val;
      searchFormClick();
    };
    const addDisease = () => {
      let obj = {
        JiBingMingCheng: "string",
        JieShi: "string",
        JianYi: "string",
        ZhiDao: "string",
        ChengDu: "string",
        PYM: "string",
        ShiYongCiShu: 0,
        DuiYingBuWei: "string",
        SuoShuYuanQu: "string"
      };
      console.log(obj);
    };
    const searchFormLiving = () => {
      return (
        <el-form model={searchForm} ref="searchForm">
          <el-row>
            <el-col span={8}>
              <el-form-item label="通用名:" prop="searchFormTongYong">
                <el-input v-model={searchForm.searchFormTongYong} placeholder="通用名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col span={8} class="flex">
              <el-button type="primary" size="default" style={{ marginLeft: "10px" }} onClick={() => searchFormClick()}>
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </el-button>
              <el-checkbox class="ml-10" v-model={searchForm.strShiFouWanQuanPiPei} label={"完全匹配"} />
            </el-col>
          </el-row>
        </el-form>
      );
    };
    let tableLiving = () => {
      return (
        <pure-table
          ref="tableRef"
          row-key={(row: any) => row.tid}
          adaptive={true}
          border={true}
          align-whole="center"
          show-overflow-tooltip={true}
          data={tableData.value}
          columns={columns}
          className="pure-table"
          highlight-current-row={true}
          onRowClick={(data: any) => tableDataClick(data)}
          pagination={pagination}
          onPageSizeChange={onSizeChange}
          onPageCurrentChange={onCurrentChange}
        ></pure-table>
      );
    };
    const paneL = () => (
      <div className="ZhenDuanOther-main-table-left  flex-[0.7] h-full">
        <div className="TongYongMing-table  bg-white mt-2  h-full">
          <div className="TongYongMing-search  px-20 py-10" style={{ marginBottom: "10px" }}>
            {searchFormLiving()}
          </div>
          <div className="TongYongMing-table-ls  h-full  px-20 py-10">{tableLiving()}</div>
        </div>
      </div>
    );
    const paneR = () => (
      <div className="ZhenDuanOther-main-table-right flex-[0.3] h-full">
        <TagXinXI class=" h-full mx-6" />
      </div>
    );
    return () => {
      return (
        <div class="ZhenDuanOther-main flex flex-col h-full">
          <div className="ZhenDuanOther-main-add back bg-white px-20 py-10">
            <el-button size="default" icon={CirclePlus} type="primary" onClick={() => addDisease()}>
              新增疾病名称
            </el-button>
            <el-button size="default" icon={CirclePlus} type="primary">
              操作云端
            </el-button>
          </div>
          <div class="ZhenDuanOther-main-table  h-full flex-1 flex">
            <splitpane split-set={settingLR}>
              {{
                paneL,
                paneR
              }}
            </splitpane>
          </div>
        </div>
      );
    };
  }
});
